<template>
  <div class="container-title-box" :style="`padding:${px} 0;`">
    <div>
      <div class="prefix-group">
        <img src="@/assets/home/prefix.png" class="prefix1" alt="" srcset="" />
        <img src="@/assets/home/prefix.png" class="prefix2" alt="" srcset="" />
        <img src="@/assets/home/prefix.png" class="prefix3" alt="" srcset="" />
      </div>
      <!-- <img :src="titleImg" alt="" class="title-img" /> -->
      <span class="title-style pangmen color-text">
        <slot name="title" ></slot>
      </span>
    </div>
    <div>
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    px: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      titleImg: '',
    };
  },
  created() {
    // this.titleImg = require(`@/assets/${this.title}`);
  },
};
</script>
<style lang="scss" scoped>
.container-title-box {
  > div img {
    vertical-align: middle;
  }

  display: flex;
  justify-content: space-between;
  align-items: center;
}
@keyframes move {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 0.3;
  }
}
.prefix-group {
  display: inline-flex;
  align-items: center;

  .prefix1 {
    opacity: 1;
    animation-name: move;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-delay: 0s;
  }
  .prefix2 {
    opacity: 0.6;
    animation-name: move;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-delay: 0.3s;
  }
  .prefix3 {
    opacity: 0.1;
    animation-name: move;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-delay: 0.7s;
  }
}
.title-img {
  margin-left: vw(10);
}
.title-style{
  font-size: vw(30);
}
</style>
